<template>
  <div w-full>
    <div @tap.stop.prevent="$navigateTo(`/pages/goods/product/detail?skuId=${props.res.skuId}&goodsId=${props.res.goodsId}`)" w-full flex goods-col overflow-hidden flex-a-c>
      <div style="flex:3">
        <image v-if="props.res.thumbnail" :src="props.res.thumbnail" @error="props.res.thumbnail = ''" w-200rpx h-200rpx
          rounded>
        </image>
        <div rounded v-else w-200rpx h-200rpx bg-color text-24rpx flex flex-a-c flex-j-c>图片已失效</div>
      </div>
      <div style="flex:7" overflow-hidden pl-20rpx flex flex-col flex-j-sb>
        <div>
          <div class="wes">
            {{ props.res.goodsName }}
          </div>
          <!-- 促销相关 -->
          <div text-24rpx text-main-color py-4rpx rounded-2rpx>
            <div v-if="props.res.salesModel === 'WHOLESALE'">
              <span>批</span>
            </div>
            <div v-for="(promotionItem, promotionIndex) in getPromotion(res)" :key="promotionIndex">
              <span mr-4rpx v-if="promotionItem.indexOf('COUPON') != -1">劵</span>
              <span mr-4rpx v-if="promotionItem.indexOf('FULL_DISCOUNT') != -1">满减</span>
              <span mr-4rpx v-if="promotionItem.indexOf('SECKILL') != -1">秒杀</span>
            </div>
          </div>
          <div flex-col my-4rpx>
            <div text-32rpx font-bold text-main-color>
              {{ unitPrice(props.res.price, '￥') }}
            </div>
          </div>
         <div flex text-24rpx flex-j-sb color-warmGray>
            <div text-24rpx>佣金比例：{{ props.res.firstProportion }}%</div>
          </div>
          <div text-24rpx mt-4rpx flex flex-a-c flex-j-sb color-warmGray>
            <div></div>
            <nut-button size="mini" plain type="primary" @tap.stop.prevent="handleLinkShare(props.res)">预计赚￥{{goodsFormatPrice(props.res.commission)[0]}}.{{goodsFormatPrice(props.res.commission)[1]}}</nut-button>
          </div>
        </div>
        <slot name="body"></slot>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { getPromotion } from '@/components/goods-list/common';
  import { unitPrice, goodsFormatPrice } from '@/utils/filters';
  const props = defineProps<{
    res: any
  }>()
  const emit = defineEmits(['handleLink'])
  // 分享
  function handleLinkShare (goods: any) {
    emit('handleLink', goods)
  }
</script>

<style scoped lang="scss">
.wes {
  /* 多出部分用省略号表示 , 用于一行 */
  overflow: hidden;
  word-wrap: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.canvas-box {
  width: 580rpx;
  height: 840rpx;
}
</style>

